<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin: 0; padding: 0}
        .left{
            width: 400px;
            height: 50px;
            background: red;
            float:left;
        }
        .right{
            width: 400px;
            height: 50px;
            background: yellow;
            float: right;
        }
        .middle{
            margin-right: 400px;
            margin-left: 400px;
            height: 50px;
            background: blue;
        }



        #box {
            padding: 0 400px 0 300px;
        }
        #box5{
            float: left;
            background-color: #34ED16;
            width: 100%;
            height: 50px;
        }
        #box6{
            float: left;
            background-color: blue;
            width: 300px;
            height: 50px;
            margin-left: -100%;
            position: relative;
            left: -300px;
        }
        #box7{
            float: right;
            background-color: aquamarine;
            width: 400px;
            height: 50px;
            margin-right: -400px;
        }


        .base {
            clear: both;
            height: 100px;
            background-color: sandybrown;
            padding: 0 220px 0 220px;
        }

        .mid {
            width: 100%;
            height: 100px;
            background-color: rosybrown;
            float: left;
        }

        .left {
            width: 220px;
            height: 100px;
            background-color: aqua;
            position: relative;
            left: -220px;
            margin-left: -100%;
        }

        .right{
            width: 220px;
            height: 100px;
            background-color: tan;
            float: right;
            margin-right: -220px;
        }
    </style>
</head>
<body>
<!--<div>-->
    <!--<div class="left"></div>-->
    <!--<div class="right"></div>-->
    <!--<div class="middle"></div>-->
<!--</div>-->

<div id="box">
    <div id="box5">box5</div>
    <div id="box6">box6</div>
    <div id="box7">box7</div>
</div>

<div class="base">
    <div class="mid">mid</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

</body>
</html>